<template>
	<view class="content" style="background-color: white;">
		<view class="back-box middle cuIcon-top-box"
			:style="[{height:StatusBar1.height+'px',width:StatusBar1.height+'px'}]" v-if="isShow" @click="showTop">
			<text class="cuIcon-top"></text>
		</view>
	
		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}" @scroll="scroll" :scroll-top="scrollTop"
			@scrolltoupper="topEvent" :scroll-with-animation='isAnima'>

			<view class="head-bg">
				<image :src="item.img" class="head-bg-img" mode="widthFix"></image>
				<view class="head-bg-view "
					:style="[{height:StatusBar1.height+StatusBar1.top+5+'px'}]">
					<view class="head-top " :style="[{height:StatusBar1.top+'px'}]">
						
					</view>
					<view class=" head-botton" :style="[{height:StatusBar1.height+'px',width:(Ww-StatusBar1.width-10)+'px'}]"  >
						<view class="back-box middle" @click="back" 
							:style="[{height:StatusBar1.height+'px',width:StatusBar1.height+'px'}]">
							<text class="cuIcon-back"></text>
						</view>
						<button class="back-box1 middle" data-name="shareBtn" open-type="share" 
							:style="[{height:StatusBar1.height+'px',width:StatusBar1.height+'px',right:StatusBar1.width+10+'px'}]">
							<text class="cuIcon-share"></text>
						</button>
					</view>
					
				</view>
			</view>

			<view class="title-box">
				<text class="title-box-head">{{item.title}}</text>
				<view class="school-tag">
					<text class="tagblue" v-for="(tag,i) in item.tags" v-if="i<2">{{tag}}</text>
				</view>
				<view class="title-button-box ">
					<view class="info1">
						<view class="circle info-num-box middle">
							<text class="cuIcon-footprint"></text>
						</view>
						<text class="info-num">{{item.look_num}}</text>
					</view>
				
					<text class="title-time">{{item.created_at}}</text>
				</view>
			</view>
			<view class="line">

			</view>
			<view class="htmlBox">
				<wxParse :content="item.desc"></wxParse>
			</view>

		</scroll-view>


	</view>
</template>

<script>
	import wxParse from "../../components/gaoyia-parse/parse.vue"
	export default {
		components: {
			wxParse
		},
		data() {
			return {
				StatusBar1: this.Custom,
				Ww: this.WW,
				WH:this.WH,
				swiperHeight: '',
				item: {},
				id: '',
				isShow: false,
				scrollTop: -1,
				isAnima: false,
				
			}
		},

		onLoad(option) {
			(option.id) ? (() => {
				this.id = option.id;
				this.getContent(option.id);
			})() : (() => {

				this.error();
			})();
		},
		onShareAppMessage(res) {
			let dat = {
				params: '/pages/basic/schoolNews',
				id: this.id,
				key: "id"
			}
			return {
				title: "校园要闻",
				imageUrl: this.item.img,
				path: "/pages/basic/basic?param=" + JSON.stringify(dat),
			}
		},
		mounted() {
		
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight;
				
			})

		},
		methods: {
			topEvent() {
				this.isAnima = false;
				this.scrollTop = -1;
			},
			scroll(e) {
				if (e.detail.scrollTop > 200) {
					this.isShow = true;
					/* this.scrollTop = e.detail.scrollTop; */
				} else {
					this.isShow = false;
				}
			},
			showTop() {
				this.isShow = false;
				this.isAnima = true;
				setTimeout(() => {
					this.scrollTop = 0;
				}, 200)


			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			preview() {

			},
			error() {
				uni.showModal({
					title: "提示",
					content: "文章已过期",
					success: (res) => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			getContent(id) {
				this.apiRequest('/buyer/NewsInfo', {
					id: id
				}, 0, 'GET').then(res => {
					if (res.code == 200) {
						this.item = res.data;

					} else {
						this.error();
					}

				});

			}

		}


	}
</script>

<style scoped>
	.htmlBox img {
		width: 100%;
	}
	.head-top{
		width: 100vw;
	}
	

	.head-bg {
		width: 100vw;
		max-height: 420upx;
		overflow: hidden;
	}

	.head-bg-view {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		z-index: 999;

	}
	.head-botton{
		display: flex;
		flex-direction: row;
	}

	.cuIcon-top-box {
		position: fixed;
		bottom: 5vh;
		float: right;
		right: 2vw;
		color: white;
		font-size: 50rpx;
		z-index: 9;
	}
	.cuIcon-top-box1{
		position: fixed;
		float: right;
		right: 2vw;
		color: white;
		font-size: 50rpx;
		z-index: 9;
	}

	.back-box {
		border-radius: 50%;
		color: white;
		font-size: 32upx;
		background-color: rgba(0, 0, 0, 0.3);
		margin-left: 1.5vw;
		
	}

	.back-box1 {
		border-radius: 50%;
		color: white;
		font-size: 32upx;
		background-color: rgba(0, 0, 0, 0.3);
		float: right;
		position: absolute;
		
	}
	.back-box11{
		position: fixed;
		bottom: 5vh;
		float: right;
		right: 2vw;
		color: white;
		font-size: 50rpx;
		z-index: 9;
		
	}

	.title-box {
		padding-top: 50upx;
		padding-bottom: 50upx;
		width: 94%;
		margin: auto;
		line-height: 1.2;

	}

	.title-box-head {
		font-size: 46upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.head-bg-img {
		width: 100vw;
		max-height: 420upx;

	}

	.title-button-box {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: row;

	}

	.title-time {
		position: absolute;
		float: right;
		right: 0;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	* {
		background-color: white;

	}

	.htmlBox {
		width: 94%;
		margin: auto;
		height: 100%;
	}

	.school-tag {
		margin-top: 20upx;
		margin-bottom: 20upx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.school-tag text {
		font-size: 20upx;
		font-weight: bold;
		border-radius: 4upx;
		padding: 10upx 15upx 10upx 15upx;
		margin: 10upx 20upx 0 0upx;
	}

	.tagblue {
		max-width: 240upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		color: #3783D0;
		background-color: #E2F0FF;
	}

	.line {
		width: 100%;
		height: 5upx;
		background: #F7F7F7;
		margin-bottom: 50upx;
	}

	.info1 {
		display: flex;
		flex-direction: row;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		align-items: center;

	}

	.info-num-box {
		width: 30upx;
		height: 30upx;
		/* background: #E5E5E5;
		border-radius: 50%; */



	}

	.info-num {
		padding-left: 5upx;
	}
</style>
